<template>
    <div>
        <el-drawer
            v-model="isShow"
            size="50%"
            :destroy-on-close="true"
            @close="closeHandle"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
        >
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
            </template>
            <el-form :model="form" label-width="auto" label-position="right" ref="formRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名" required prop="name">
                            <el-input v-model="form.name" placeholder="双击选择律师" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" required prop="sex">
                            <el-radio-group v-model="form.casecode" :readonly="isreadonly">
                                <el-radio value="1" border class="me-3">男</el-radio>
                                <el-radio value="0" border>女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证" required prop="code">
                            <el-input v-model="form.code" placeholder="请输入身份证" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" required prop="tel">
                            <el-input v-model="form.tel" placeholder="请输入手机号" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="事务所">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="执业证号" required  prop="code">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="执业证有效期" required  prop="code">
                            <el-date-picker
                                v-model="form.youxiaodata"
                                type="date"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="违规次数" style="width:100%">
                            <el-input-number v-model="form.num" placeholder="请输入违规次数" 
                            style="width:100%;" :controls="false" :readonly="isreadonly" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="列入黑名单">
                            <el-radio-group v-model="form.casecode" :readonly="isreadonly">
                                <el-radio value="1" border class="me-3">是</el-radio>
                                <el-radio value="0" border>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                        <el-select
                            v-model="form.status"
                            placeholder="用户状态"
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in sys_normal_disable"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>
                    </el-col>
                    
                </el-row>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitHandle">提交</el-button>
                <el-button @click="isShow = false">关闭</el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
const {proxy} = getCurrentInstance()
import {validateIdCard,validatePhoneNumber} from "@/validate/validateIdCard.js";
// import {getCaseInfoList,getCaseInfoInfo} from "@/api/CaseInfo/CaseInfo";
const {sys_normal_disable, sys_user_sex} = proxy.useDict("sys_normal_disable", "sys_user_sex");
// 是否显示抽屉
const isShow = ref(false)
const isreadonly = ref(true)
const sarList = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }])
// 抽屉标题
const title = ref('')
const rules = {
    name: [{ required: true, message: "案件名称不能为空", trigger: "change" }],
    unitId: [{ required: true, message: "办案单位不能为空", trigger: "blur" }],
    depid: [{ required: true, message: "办案部门不能为空", trigger: "blur" }],
    code: [
        {required: true, message: '请填写身份证号', trigger: 'blur'},
        {validator: validateIdCard, trigger: 'blur'}
    ],
    tel:[
        {required: true, message: '请填写手机号', trigger: 'blur'},
        {validator: validatePhoneNumber, trigger: 'blur'}
    ],
}

const isAdd = ref(true)

const form = ref({
    
})
// 通知事件
const emit = defineEmits(['getCaseList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

onMounted(() => {
    
})



const showAddEditCase = () => {
    title.value = '新增律师信息';
    isAdd.value = true
    isreadonly.value = false
    changeShowStatus()
}

const showEditCase = async (data,OperateType) => {
    if(OperateType == "edit"){
        title.value = '修改律师信息'
        isAdd.value = false
        isreadonly.value = false
    }else{
        title.value = '律师信息详情'
        isAdd.value = false
        isreadonly.value = true
    }
    // 对传过来的案由中文进行查找出其对应的casebriefId值
    // await getCaseInfoInfo(data.caseCaseinfoId).then(res => {
    //         form.value = res.data
    //         getDepartment()
    //     })
    changeShowStatus()
}

defineExpose({showAddEditCase,showEditCase})


const submitHandle = async () => {
    // proxy.$refs["formRef"].validate(valid => {
    //     if (valid) {
    //         if (form.value['caseCaseinfoId']) {
    //             editCaseInfo(form.value).then(res => {
    //                 changeShowStatus()
    //                 emit('getCaseList', '来了老弟')
    //             })
    //         } else {
    //             createCaseInfo(form.value).then(res => {
    //                 changeShowStatus()
    //                 emit('getCaseList', '来了老弟')
    //             })
    //         }
    //     }
    // });
}
const getCaseData = (data) => {
    console.log("儿子传过来数据了",data)
}
const getLawyerData = (data) => {
    console.log("儿子传过来数据了",data)
    form.value.name = data.name
}

// 关闭后的回调事件
const closeHandle = () => {
    form.value = {
        
    }
}
</script>

<style lang="scss" scoped>
h4{margin:0;}
.tittle{display: flex;align-items: center;color: #0077B9;}
:deep() .el-date-editor {
  width: 100%;
}
:deep() .el-cascader{width: 100%;}
:deep() .el-drawer__body{padding: 10px 20px;}

:deep() .el-input-number .el-input__inner{text-align: left;}
// :deep() .el-radio__input{display: none;}

// .el-radio.is-bordered.is-checked {
//     border-color: var(--el-color-primary-dark-2);
// }
</style>